<script setup lang="ts">

import {Page} from "@vben/common-ui";
import {useVbenVxeGrid} from "#/adapter/vxe-table";
import {ElButton} from "element-plus";

let [VxeGrid, api] = useVbenVxeGrid({
  gridOptions: {
    height: '100%', // 铺满内容区 auto 也可以
    stripe: true, // 斑马纹
    data: [
      {
        id: 10001,
        name: 'Test1',
        nickname: 'T1',
        role: 'Develop',
        sex: 'Man',
        age: 28,
        address: 'Shenzhen'
      },
      {
        id: 10002,
        name: 'Test2',
        nickname: 'T2',
        role: 'Designer',
        sex: 'Woman',
        age: 22,
        address: 'Shanghai'
      }, {
        id: 10002,
        name: 'Test2',
        nickname: 'T2',
        role: 'Develop',
        sex: 'Woman',
        age: 28,
        address: 'Shenzhen'
      },
      {
        id: 10003,
        name: 'Test3',
        nickname: 'T3',
        role: 'Develop',
        sex: 'Man',
        age: 28,
        address: 'Shenzhen'
      },
      {
        id: 10004,
        name: 'Test4',
        nickname: 'T4',
        role: 'Develop',
        sex: 'Woman',
        age: 28,
        address: 'Shenzhen'
      }
    ],
    columns: [
      {field: 'id', title: 'ID', width: 80},
      {field: 'name', title: 'Name', width: 80},
      {field: 'nickname', title: 'Nickname', width: 80},
      {field: 'role', title: 'Role', width: 80},
      {field: 'sex', title: 'Sex', width: 80},
      {field: 'age', title: 'Age', width: 80},
      {field: 'address', title: 'Address', width: 200},
      {slots: {default: 'action'}, title: '操作'},
    ],

    toolbarConfig: {
      custom: true,
      export: true,
      refresh: true,
      resizable: true,
      search: true,
      zoom: true,
    },
    exportConfig: {},
  }
});

</script>

<template>
  <Page
    description="Vxe-Table演示"
    title="Vxe-Table Demo"
    auto-content-height
  >
    <!--    <div style="height: 100%;display: flex;flex-direction: column">-->
    <!--      <div style="flex: 1;background-color: #ccff70">-->
    <VxeGrid>
      <template #action="{ row }">
        <ElButton @click="() => { console.log(row) }">操作</ElButton>
      </template>
    </VxeGrid>
    <!--      </div>-->
    <!--    </div>-->
  </Page>
</template>

<style scoped>

</style>
